<template>
	<div class="index-page">
		<!-- 快速链接 -->
		<div class="fast-link-list mt-4 flex flex-wrap justify-center mx-auto w-full">
			<div
				class="fast-link-container w-28 flex items-center justify-center relative mx-1"
				v-for="item in 5">
				<fast-link
					name="蓝云博客"
					icon="https://lanyunblog.com/favicon.ico"
					link="https://lanyunblog.com" />
			</div>
			<div class="add-fast-link w-28 flex flex-col items-center justify-center relative mx-1">
				<div
					class="w-11 h-11 bg-white transition duration-300 rounded-xl flex items-center justify-center cursor-pointer text-gray-600 shadow-md hover:bg-gray-100">
					<icon name="material-symbols:add" :size="23" />
				</div>
				<div class="w-full text-center text-xs mt-2 text-gray-600 truncate">添加网站</div>
			</div>
		</div>
		<!-- 热门资源 -->
		<div class="hot-res w-full max-w-[1200px] mx-auto mt-20 px-3">
			<div
				class="flex items-center font-bold text-orange-500 justify-center mb-3 border-2 w-fit mx-auto bg-white px-5 py-1 rounded-full shadow-md hover:shadow-lg">
				<icon name="fluent-emoji-flat:fire" :size="20" />
				<span>热门推荐</span>
			</div>
			<el-row class="w-full">
				<el-col class="p-2" :xs="24" :sm="8" :md="6" :lg="6" :xl="4" v-for="item in 12">
					<resource-card
						name="蓝云博客"
						:visit-count="1000"
						url="https://lanyunblog.com/"
						desc="一个分享技术、生活、感悟的博客"
						icon="https://lanyunblog.com/favicon.ico" />
				</el-col>
			</el-row>
		</div>
	</div>
</template>

<script name="IndexPage" lang="ts" setup>
definePageMeta({
	keepalive: true,
});
</script>

<style lang="scss" scoped></style>
